<template>
  <div class="songTop">
    <van-sticky @change="stickyChange">
      <div class="play-nav" :class="{ stick: isStick }">
        <div @click="$router.go(-1)">
          <van-icon name="arrow-left" /> 歌单
        </div>
      </div>
    </van-sticky>

    <div class="bg">
      <van-image class="bg-img" :src="playlist.coverImgUrl" fit="cover" />

      <div class="bg-item">
        <van-skeleton avatar :row="4" avatar-size="120" avatar-shape="square" :loading="skeLoading" />
        <div class="playlist-img">
          <van-image :src="playlist.coverImgUrl" radius="25" fit="fill">
            <div class="play-num">
              <van-icon name="play-circle-o" />
              {{ playCount }}万
            </div>
          </van-image>
        </div>
        <div class="playlist-msg">
          <div class="title van-multi-ellipsis--l2">
            {{ playlist.name }}
          </div>
          <div class="creator" v-if="playlist.creator">
            <!-- 作者 -->
            <van-image round :src="playlist.creator.avatarUrl" />
            {{ playlist.creator.nickname }}
          </div>
          <div class="tags">
            <span v-for="item in playlist.tags">
              {{ item }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, defineProps, watch } from 'vue'
import { computed } from '@vue/reactivity';
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia';
import { PlayStore } from '@/store/playlist'
const playstore = PlayStore();

const $route = useRoute()
const shareRef = ref();

const props = defineProps({
  playlist: {
    default: [{
      coverImgUrl: '@/assets/images/photo-bg.png'
    }]
  },
})
let skeLoading = ref(true)

// 总播放量
const playCount = computed(() => {
  console.log();
  let num = props.playlist.playCount / 10000;
  return num.toFixed(2)
})

// 吸顶
let isStick = ref(false)
const stickyChange = (isFixed) => {
  isStick.value = isFixed
}

defineExpose({
  skeLoading
})
</script>

<style lang='less' scoped>
.play-nav {
  color: #FFF;
  font-size: .5rem;
  line-height: 80px;
  height: 80px;
  padding: 0 40px;
  box-sizing: border-box;

  &.stick {
    background-color: #FFF;
    color: #000;
  }
}



.bg {
  padding: 20px 40px;
  box-sizing: border-box;

  .bg-img {
    width: 100%;
    min-height: 400px;
    height: 500px;
    position: fixed;
    z-index: -1;
    //虚化
    filter: blur(0.6rem);
  }

  .bg-item {
    margin-top: 40px;
    display: flex;
    flex-wrap: nowrap;

    .playlist-img {
      width: 300px;

      .play-num {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 10px;
        color: #FFF;
        background-color: rgba(255, 255, 255, .15);
        padding: 5px 10px;
        box-sizing: border-box;
        border-radius: 50px;

        .van-icon {
          margin-right: 5px;
        }
      }
    }

    .playlist-msg {
      margin-left: 40px;
      font-size: .5rem;
      color: #FFF;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      padding-bottom: 20px;

      .creator {
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        font-size: 28px;

        .van-image {
          width: 50px;
          max-height: 100%;
          margin-right: 20px;
        }
      }

      .tags {
        font-size: 30px;

        span {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
